<template>
  <div class="supplier-management">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">供应商管理</h1>
      </div>
      <div class="header-center">
        <div class="status-badges">
          <el-tag type="primary" class="status-tag">
            <el-icon><OfficeBuilding /></el-icon>
            总数: {{ stats.totalSuppliers }}
          </el-tag>
          <el-tag type="success" class="status-tag">
            <el-icon><Connection /></el-icon>
            合作中: {{ stats.activeSuppliers }}
          </el-tag>
          <el-tag type="warning" class="status-tag">
            <el-icon><Clock /></el-icon>
            待审核: {{ stats.pendingSuppliers }}
          </el-tag>
          <el-tag type="danger" class="status-tag">
            <el-icon><CircleClose /></el-icon>
            高风险: {{ stats.riskSuppliers }}
          </el-tag>
        </div>
      </div>
      <div class="header-actions">
        <el-button type="primary" :icon="Plus" @click="showSupplierDialog">
          新增供应商
        </el-button>
        <el-button :icon="Upload" @click="showImportDialog">
          导入供应商
        </el-button>
        <el-button :icon="Download" @click="exportSuppliers">
          导出供应商
        </el-button>
        <el-button :icon="Operation" @click="showBatchOperations" :disabled="tableSelectedSuppliers.length === 0">
          批量操作 ({{ tableSelectedSuppliers.length }})
        </el-button>
        <el-button :icon="Refresh" @click="handleRefresh" :loading="loading" class="refresh-button">
          刷新
        </el-button>
      </div>
    </div>

    <!-- 智能提醒 -->
    <el-card 
      v-if="smartAlerts.length > 0" 
      class="smart-alerts-card" 
      shadow="hover"
    >
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon><MagicStick /></el-icon>
            智能提醒
          </span>
        </div>
      </template>
      <SupplierSmartAlerts 
        :suppliers="suppliers" 
        :stats="stats"
        @alert-action="handleAlertAction"
      />
    </el-card>

    <!-- 筛选器 -->
    <SupplierFilter 
      :query-params="queryParams" 
      @search="handleSearch" 
      @reset="handleReset" 
    />

    <!-- 供应商统计 -->
    <SupplierStats :stats="stats" />

    <!-- 供应商表格 -->
    <SupplierTable
      :suppliers="tableSuppliers"
      :loading="loading"
      :pagination="tablePagination"
      :selected-suppliers="tableSelectedSuppliers"
      @selection-change="handleSelectionChange"
      @view-detail="viewSupplierDetail"
      @edit="editSupplier"
      @more-action="handleMoreAction"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @refresh="handleRefresh"
    />

    <!-- 供应商操作对话框 -->
    <SupplierOperationDialog
      v-model="showDialog"
      :editing-supplier="editingSupplier"
      @submit="saveSupplier"
      @close="handleDialogClose"
    />

    <!-- 供应商详情抽屉 -->
    <SupplierDetail
      v-model="detailDialogVisible"
      :supplier="detailSupplier"
      @close="handleDetailDialogClose"
    />

    <!-- 供应商导入向导 -->
    <DedicatedSupplierImportWizard
      v-model="showImportDrawer"
      @import-success="handleRefresh"
    />
    <div v-if="showImportDrawer" style="position: fixed; top: 0; left: 0; background: red; color: white; z-index: 9999; padding: 10px;">
      调试：showImportDrawer为true，但抽屉未显示
    </div>

    <!-- 供应商交易记录抽屉 -->
    <SupplierTransactionRecords
      v-model="transactionRecordsVisible"
      :supplier-id="currentSupplier?.id || 0"
      :supplier-name="currentSupplier?.name || ''"
      @close="handleTransactionRecordsClose"
    />
    
    <!-- 批量操作弹窗 -->
    <BatchOperationsDialog
      v-model="showBatchOperationsDialog"
      :selected-suppliers="selectedSuppliers"
      @success="handleBatchOperationSuccess"
      @close="showBatchOperationsDialog = false"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, reactive, computed, onMounted, toRaw, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  OfficeBuilding, Connection, Clock, Upload, Operation, 
  Download, Plus, Setting, Sort, Document, ShoppingBag, 
  DataAnalysis, CircleClose, Delete, ArrowDown, MagicStick,
  Refresh
} from '@element-plus/icons-vue'

// 导入拆分的组件
import SupplierStats from './components/SupplierStats.vue'
import SupplierFilter from './components/SupplierFilter.vue'
import SupplierTable from './components/SupplierTable.vue'  // 使用新的表格组件
import SupplierOperationDialog from './components/SupplierOperationDialog.vue'
import SupplierDetail from './components/SupplierDetail.vue'  // 使用新的详情组件
import SupplierImportWizard from './components/SupplierImportWizard.vue'
import DedicatedSupplierImportWizard from './components/DedicatedSupplierImportWizard.vue'
import SupplierTransactionRecords from './components/SupplierTransactionRecords.vue'  // 添加交易记录组件
import SupplierSmartAlerts from './components/SupplierSmartAlerts.vue'  // 添加智能提醒组件
import BatchOperationsDialog from './components/BatchOperationsDialog.vue'  // 添加批量操作弹窗组件

// 导入API
import * as procurementAPI from '@/api/procurement'

// 使用路由
const router = useRouter()

// 数据模型
interface Supplier {
  id: number
  name: string
  contactPerson: string | null
  phone: string
  email: string
  address: string
  status: string
  remark: string
  rating: string | number
  cooperationDate?: string
  createdAt: string
  updatedAt: string
}

interface SupplierStats {
  totalSuppliers: number
  activeSuppliers: number
  pendingSuppliers: number
  riskSuppliers: number
  supplierTrend: number
  activeTrend: number
  pendingTrend: number
  riskTrend: number
}

interface QueryParams {
  name: string
  contactPerson: string
  phone: string
  email: string
  status: string
  region: string[]
  cooperationDateRange: string[]
  minRating: number
  page: number
  limit: number
}

// 响应式数据
const suppliers = ref<Supplier[]>([])
const loading = ref(false)
const showDialog = ref(false)
const detailDialogVisible = ref(false)
const showImportDrawer = ref(false)
const transactionRecordsVisible = ref(false)  // 添加交易记录抽屉控制
const showBatchOperationsDialog = ref(false)  // 添加批量操作弹窗控制
const detailSupplier = ref<Supplier | null>(null)
const currentSupplier = ref<Supplier | null>(null)  // 添加当前供应商引用
const editingSupplier = ref<Supplier | null>(null)
const selectedSuppliers = ref<Supplier[]>([])

// 监听 showImportDrawer 的变化
watch(showImportDrawer, (newVal) => {
  console.log('showImportDrawer changed to:', newVal);
});

// 添加用于存储统计信息的响应式对象
const statsData = reactive({
  totalSuppliers: 0,
  activeSuppliers: 0,
  pendingSuppliers: 0,
  riskSuppliers: 0,
  supplierTrend: 0,
  activeTrend: 0,
  pendingTrend: 0,
  riskTrend: 0
})

const queryParams = reactive<QueryParams>({
  name: '',
  contactPerson: '',
  phone: '',
  email: '',
  status: '',
  region: [],
  cooperationDateRange: [],
  minRating: 0,
  page: 1,
  limit: 20
})

// 修改pagination为ref而不是reactive
const pagination = ref({
  page: 1,
  limit: 20,
  total: 0
})

// 计算属性
const stats = computed(() => {
  // 使用响应式statsData对象中的数据
  return {
    totalSuppliers: statsData.totalSuppliers,
    activeSuppliers: statsData.activeSuppliers,
    pendingSuppliers: statsData.pendingSuppliers,
    riskSuppliers: statsData.riskSuppliers,
    supplierTrend: statsData.supplierTrend,
    activeTrend: statsData.activeTrend,
    pendingTrend: statsData.pendingTrend,
    riskTrend: statsData.riskTrend
  }
})

// 添加计算属性确保数据正确传递
const tableSuppliers = computed(() => {
  console.log('计算属性tableSuppliers被调用，当前值:', suppliers.value);
  const result = suppliers.value || [];
  console.log('计算属性tableSuppliers返回值:', result);
  return result;
});

const tablePagination = computed(() => {
  console.log('计算属性tablePagination被调用，当前值:', pagination.value);
  return pagination.value;
});

const tableSelectedSuppliers = computed(() => {
  console.log('计算属性tableSelectedSuppliers被调用，当前值:', selectedSuppliers.value);
  const result = selectedSuppliers.value || [];
  console.log('计算属性tableSelectedSuppliers返回值:', result);
  return result;
});

// 智能提醒计算属性
const smartAlerts = computed(() => {
  const alerts = [];
  
  // 高风险供应商提醒
  if (statsData.riskSuppliers > 0) {
    alerts.push({
      id: 'risk-suppliers',
      type: 'risk',
      title: `检测到 ${statsData.riskSuppliers} 个高风险供应商`,
      description: '评分低于3.0的合作中供应商需要关注',
      priority: statsData.riskSuppliers > 2 ? 'high' : 'medium'
    });
  }
  
  // 待审核供应商提醒
  if (statsData.pendingSuppliers > 0) {
    alerts.push({
      id: 'pending-suppliers',
      type: 'review',
      title: `有待审核供应商 (${statsData.pendingSuppliers} 个)`,
      description: '有待审核的供应商需要及时处理',
      priority: statsData.pendingSuppliers > 5 ? 'high' : 'medium'
    });
  }
  
  return alerts;
});

// 方法
const loadSuppliers = async () => {
  console.log('开始加载供应商列表');
  loading.value = true;
  try {
    // 构造API查询参数
    const params = {
      name: queryParams.name || undefined,
      contactPerson: queryParams.contactPerson || undefined,
      phone: queryParams.phone || undefined,
      email: queryParams.email || undefined,
      status: queryParams.status || undefined,
      region: queryParams.region.length > 0 ? queryParams.region.join(',') : undefined,
      cooperationStartDate: queryParams.cooperationDateRange[0] || undefined,
      cooperationEndDate: queryParams.cooperationDateRange[1] || undefined,
      minRating: queryParams.minRating || undefined,
      page: queryParams.page,
      limit: queryParams.limit
    };
    
    console.log('查询参数:', params);
    
    // 调用真实API
    const response = await procurementAPI.getSuppliers(params);
    
    console.log('API响应:', response);
    
    // 检查API响应结构并正确处理
    let supplierList = [];
    let paginationData = {
      page: 1,
      limit: 20,
      total: 0
    };
    let apiStatsData = {
      total: 0,
      active: 0,
      pending: 0,
      risk: 0
    };
    
    if (response.success && response.data) {
      // 处理分页数据
      supplierList = response.data.list || [];
      if (response.data.pagination) {
        paginationData = {
          page: response.data.pagination.page || 1,
          limit: response.data.pagination.limit || 20,
          total: response.data.pagination.total || 0
        };
      }
      
      // 处理统计信息
      if (response.data.stats) {
        apiStatsData = response.data.stats;
      }
      
      console.log('API响应数据列表:', supplierList);
      if (supplierList.length > 0) {
        console.log('第一条数据示例:', supplierList[0]);
      }
    }
    
    // 修复数据结构不匹配问题
    suppliers.value = supplierList;
    pagination.value = paginationData;
    
    console.log('加载完成，供应商数量:', supplierList.length);
    console.log('suppliers.value:', suppliers.value);
    console.log('pagination:', pagination.value);
    console.log('selectedSuppliers.value:', selectedSuppliers.value);
    
    // 添加调试信息，检查传递给SupplierTable的数据
    console.log('准备传递给SupplierTable的数据:');
    console.log('  - suppliers:', suppliers.value);
    console.log('  - loading:', loading.value);
    console.log('  - pagination:', pagination.value);
    console.log('  - selectedSuppliers:', selectedSuppliers.value);
    
    // 加载统计信息
    loadSupplierStats();
  } catch (error) {
    console.error('加载供应商列表失败:', error);
    ElMessage.error('加载供应商列表失败: ' + (error as Error).message);
  } finally {
    loading.value = false;
    console.log('加载完成，loading状态:', loading.value);
  }
}

const showSupplierDialog = () => {
  editingSupplier.value = null
  showDialog.value = true
}

const editSupplier = (supplier: Supplier) => {
  editingSupplier.value = supplier
  showDialog.value = true
}

const viewSupplierDetail = (supplier: Supplier) => {
  detailSupplier.value = supplier
  detailDialogVisible.value = true
}

const saveSupplier = async (formData: any) => {
  try {
    if (editingSupplier.value) {
      // 编辑供应商
      await procurementAPI.updateSupplier(editingSupplier.value.id, formData)
      ElMessage.success('供应商更新成功')
    } else {
      // 新增供应商
      await procurementAPI.createSupplier(formData)
      ElMessage.success('供应商添加成功')
    }
    loadSuppliers()
    // 操作成功后关闭对话框
    showDialog.value = false
    editingSupplier.value = null
  } catch (error: any) {
    // 操作失败时显示错误信息，但不关闭对话框
    ElMessage.error('操作失败: ' + (error as Error).message)
    // 重新抛出错误，让调用者知道操作失败了
    throw error
  }
}

const deleteSupplier = async (supplier: Supplier) => {
  try {
    await ElMessageBox.confirm(`确定要删除供应商 "${supplier.name}" 吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await procurementAPI.deleteSupplier(supplier.id)
    ElMessage.success('供应商删除成功')
    loadSuppliers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除供应商失败: ' + (error as Error).message)
    }
  }
}

const handleDialogClose = () => {
  showDialog.value = false
  editingSupplier.value = null
}

const handleDetailDialogClose = () => {
  detailDialogVisible.value = false
  detailSupplier.value = null
}

const handleTransactionRecordsClose = () => {
  transactionRecordsVisible.value = false
  currentSupplier.value = null
}

// 批量操作成功后的处理函数
const handleBatchOperationSuccess = () => {
  // 清空选中的供应商
  selectedSuppliers.value = []
  // 重新加载供应商列表
  loadSuppliers()
  // 重新加载统计信息
  loadSupplierStats()
}

const handleSearch = () => {
  // 重置页码为第一页
  queryParams.page = 1
  pagination.value.page = 1
  loadSuppliers()
}

const handleReset = () => {
  Object.assign(queryParams, {
    name: '',
    contactPerson: '',
    phone: '',
    email: '',
    status: '',
    cooperationDateRange: [],
    minRating: 0,
    page: 1,
    limit: 20
  })
  pagination.value.page = 1
  pagination.value.limit = 20
  pagination.value.total = 0
  loadSuppliers()
}

const handleRefresh = () => {
  loadSuppliers()
}

const exportSuppliers = async () => {
  try {
    const blob = await procurementAPI.exportSuppliers(queryParams)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `suppliers_${new Date().toISOString().slice(0, 10)}.xlsx`
    link.click()
    
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('供应商导出成功')
  } catch (error) {
    ElMessage.error('供应商导出失败: ' + (error as Error).message)
  }
}

const showImportDialog = () => {
  console.log('点击导入供应商按钮');
  showImportDrawer.value = true;
  console.log('showImportDrawer.value:', showImportDrawer.value);
}

const showBatchOperations = async () => {
  if (selectedSuppliers.value.length === 0) {
    ElMessage.warning('请先选择供应商')
    return
  }
  
  // 显示批量操作弹窗
  showBatchOperationsDialog.value = true
}

// 批量激活供应商
const handleBatchActivate = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要激活选中的 ${selectedSuppliers.value.length} 个供应商吗？`, 
      '批量激活确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedSuppliers.value.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchActivateSuppliers(ids)
    ElMessage.success('批量激活成功')
    selectedSuppliers.value = []
    loadSuppliers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量激活失败: ' + (error as Error).message)
    }
  }
}

// 批量停用供应商
const handleBatchDeactivate = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要停用选中的 ${selectedSuppliers.value.length} 个供应商吗？`, 
      '批量停用确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedSuppliers.value.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchDeactivateSuppliers(ids)
    ElMessage.success('批量停用成功')
    selectedSuppliers.value = []
    loadSuppliers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量停用失败: ' + (error as Error).message)
    }
  }
}

// 批量删除供应商
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedSuppliers.value.length} 个供应商吗？`, 
      '批量删除确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedSuppliers.value.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchDeleteSuppliers(ids)
    ElMessage.success('批量删除成功')
    selectedSuppliers.value = []
    loadSuppliers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败: ' + (error as Error).message)
    }
  }
}

const handleSelectionChange = (selection: Supplier[]) => {
  selectedSuppliers.value = selection
}

const handleRowClick = (row: Supplier) => {
  viewSupplierDetail(row)
}

const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  ElMessage.info(`按 ${sort.prop} ${sort.order} 排序`)
}

const handleSort = (field: string) => {
  ElMessage.info(`按 ${field} 排序`)
}

const handleMoreAction = async (command: { action: string, row: Supplier }) => {
  switch (command.action) {
    case 'activate':
      try {
        await ElMessageBox.confirm(`确定要激活供应商 "${command.row.name}" 吗？`, '激活供应商', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用API激活供应商
        await procurementAPI.activateSupplier(command.row.id)
        ElMessage.success('供应商已激活')
        loadSuppliers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('激活供应商失败: ' + (error as Error).message)
        }
      }
      break
    case 'deactivate':
      try {
        await ElMessageBox.confirm(`确定要停用供应商 "${command.row.name}" 吗？`, '停用供应商', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用API停用供应商
        await procurementAPI.deactivateSupplier(command.row.id)
        ElMessage.success('供应商已停用')
        loadSuppliers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('停用供应商失败: ' + (error as Error).message)
        }
      }
      break
    case 'suspend':
      try {
        await ElMessageBox.confirm(`确定要暂停与 "${command.row.name}" 的合作吗？`, '暂停合作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用API更新供应商状态为'suspended'
        await procurementAPI.updateSupplier(command.row.id, { status: 'suspended' })
        ElMessage.success('已暂停合作')
        loadSuppliers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('暂停合作失败: ' + (error as Error).message)
        }
      }
      break
    case 'terminate':
      try {
        await ElMessageBox.confirm(`确定要终止与 "${command.row.name}" 的合作吗？`, '终止合作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用API更新供应商状态为'terminated'
        await procurementAPI.updateSupplier(command.row.id, { status: 'terminated' })
        ElMessage.success('已终止合作')
        loadSuppliers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('终止合作失败: ' + (error as Error).message)
        }
      }
      break
    case 'delete':
      try {
        await ElMessageBox.confirm(`确定要删除供应商 "${command.row.name}" 吗？`, '删除供应商', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用API删除供应商
        await procurementAPI.deleteSupplier(command.row.id)
        ElMessage.success('供应商已删除')
        loadSuppliers()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除供应商失败: ' + (error as Error).message)
        }
      }
      break
    case 'transactions':
      // 显示供应商交易记录
      currentSupplier.value = command.row
      transactionRecordsVisible.value = true
      break
    case 'contract':
      // 跳转到合同管理页面，传递供应商ID作为参数
      router.push(`/procurement/contracts?supplierId=${command.row.id}`)
      break
    case 'purchase':
      ElMessage.info('采购记录功能待实现')
      break
    case 'evaluate':
      // 跳转到供应商评估页面，传递供应商ID作为参数
      router.push(`/procurement/evaluations?supplierId=${command.row.id}`)
      break
  }
}

const handleSizeChange = (size: number) => {
  pagination.value.limit = size
  queryParams.limit = size
  loadSuppliers()
}

const handleCurrentChange = (page: number) => {
  pagination.value.page = page
  queryParams.page = page
  loadSuppliers()
}

const showColumnSettings = () => {
  ElMessage.info('列设置功能待实现')
}

// 智能提醒处理函数
const handleAlertAction = (alert: any) => {
  switch (alert.action) {
    case 'view_risk_suppliers':
      // 筛选显示高风险供应商
      Object.assign(queryParams, {
        minRating: 0,
        maxRating: 3.0,
        status: 'active'
      })
      handleSearch()
      ElMessage.success('已筛选显示高风险供应商')
      break
    case 'review_low_rated_suppliers':
      ElMessage.info('查看低评分供应商功能待实现')
      break
    case 'review_pending_suppliers':
      // 筛选显示待审核供应商
      Object.assign(queryParams, {
        status: 'pending'
      })
      handleSearch()
      ElMessage.success('已筛选显示待审核供应商')
      break
    case 'review_contract_expiry':
      ElMessage.info('查看合同到期供应商功能待实现')
      break
    default:
      ElMessage.info('暂不支持此操作')
  }
}

// 加载供应商统计信息
const loadSupplierStats = async () => {
  try {
    const response = await procurementAPI.getSupplierStats()
    if (response.success && response.data) {
      // 更新statsData对象，而不是直接修改计算属性stats
      Object.assign(statsData, {
        totalSuppliers: response.data.total || 0,
        activeSuppliers: response.data.status?.active || 0,
        pendingSuppliers: response.data.status?.pending || 0,
        riskSuppliers: response.data.risk || 0,
        supplierTrend: 0,
        activeTrend: 0,
        pendingTrend: 0,
        riskTrend: 0
      })
    }
  } catch (error) {
    console.error('加载供应商统计信息失败:', error)
  }
}

onMounted(() => {
  loadSuppliers()
  loadSupplierStats() // 在组件挂载时加载统计信息
})
</script>

<style scoped lang="scss">
.supplier-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    
    .header-left {
      .page-title {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #1f2d3d;
      }
    }
    
    .header-center {
      flex: 1;
      display: flex;
      justify-content: center;
      
      .status-badges {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        
        .status-tag {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 5px 10px;
        }
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      
      .refresh-button {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 15px;
      }
    }
  }
  
  .smart-alerts-card {
    margin-bottom: 20px;
    
    :deep(.el-card__header) {
      padding: 12px 20px;
      border-bottom: 1px solid #f0f0f0;
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 6px;
        }
      }
    }
    
    :deep(.el-card__body) {
      padding: 16px 20px;
    }
  }
  
  :deep(.el-card) {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .supplier-management {
    padding: 16px;
    
    .page-header {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
      
      .header-left {
        .status-badges {
          flex-wrap: wrap;
        }
      }
      
      .header-actions {
        justify-content: center;
      }
    }
  }
}
</style>